<template>
  <div>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <!-- 排行榜star -->
          <h2 class="fea-title">云音乐特色榜</h2>
          <ul class="fea-ul" v-for="(item,index) in toplist" :key="index">
            <li @click="gettopitem(index)">
              <div class="item f-cb">
                <div class="left">
                  <a class="avatar" :href="'#/discover/toplist?id='+item.id">
                    <!--:href="'/discover/toplist?id='+item.id"-->
                    <img
                      :src="item.coverImgUrl+'?param=40y40'"
                      :alt="item.name"
                      width="40"
                      height="40"
                    />
                    <span class="msk"></span>
                  </a>
                </div>
                <p class="name">
                  <a :href="'#/discover/toplist?id='+item.id" class="title">{{item.name}}</a>
                </p>
                <p class="col">每天更新</p>
              </div>
            </li>
          </ul>
          <!-- 排行榜end -->
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <!-- 头部内容及对榜单操作star -->
          <div class="tophand">
            <div class="tophandimg">
              <img :src="toplist[temp].coverImgUrl+'?param=156y156'" width="150" height="150" />
            </div>
            <div class="tophandgl">
              <div class="content">
                <h2 class="title">{{toplist[temp].name}}</h2>
                <div class="upd">
                  <i class="el-icon-time"></i>
                  <span class="time">最近更新：05月08日</span>
                  <span class="col">（每天更新）</span>
                </div>
                <div class="btns">
                  <el-button type="primary" icon="el-icon-video-play" @click.native="play(musiclist[0].id)">播放</el-button>
                  <el-button type="primary" class="el-icon-plus"></el-button>
                  <el-button icon="el-icon-folder-add">({{toplist[temp].subscribedCount}})</el-button>
                  <el-button icon="el-icon-share">({{toplist[temp].shareCount}})</el-button>
                  <el-button icon="el-icon-s-comment">({{toplist[temp].commentCount}})</el-button>
                </div>
              </div>
            </div>
          </div>
          <!-- 头部内容及对榜单操作end -->
          <!-- 榜单排行表格star -->
          <div class="toplist">
            <div class="toplistdata">
              <span style="font-size:24px">歌曲列表</span>
              <span style="margin-left:20px;font-size:12px;">
                <span>{{musiclist.length}}</span>首歌
              </span>
              <span style="float:right;font-size:12px;margin-top:15px;" >
                播放：
                <strong style="color:red;">{{toplist[temp].playCount}}</strong>次
              </span>
            </div>
            <el-table
              stripe
              :data="musiclist"
              border
              style="width: 100%;border-top:3px solid red;margin-top:5px;vertical-align: middle;"
            >
              <el-table-column width="100">
                <template slot-scope="scope">
                  <span>{{scope.$index+1}}</span>
                </template>
              </el-table-column>
              <el-table-column label="标签" width="380">
                <template slot-scope="scope">
                  <img
                    v-if="scope.$index+1<4"
                    style="float:left;"
                    :src="scope.row.al.picUrl+'?param=50y50'"
                    width="50"
                    height="50"
                  />
                  <el-button type="text" circle @click="play(scope.row.id)">
                    <i id="bfj" class="el-icon-video-play"></i>
                  </el-button>
                  <a href="#">
                    <router-link :to="'/discover/musicInfo/id='+scope.row.id">{{scope.row.name}}</router-link>
                  </a>
                </template>
              </el-table-column>
              <el-table-column label="时长" width="100">
                <template slot-scope="scope">{{changtime(scope.row.dt)}}</template>
              </el-table-column>
              <el-table-column label="歌手" width="180">
                <template slot-scope="scope"><a :href="'#/discover/songerInfo/id='+scope.row.ar[0].id">{{scope.row.ar[0].name}}</a></template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      temp: 0,
      flag:false,
      toplist: [],
      ids: [],
      musiclist: []
    };
  },
  methods: {
    gettopitem(index) {
      this.temp = index;
      this.musiclist = this.toplist[index].tracks;
    },
    //调用方法播放
    play(id) {
      this.$store.commit("chang", id);
    },
    changtime: function(time) {
      return this.$store.getters.changeMusicTime(time);
    }
  },
  mounted() {
    for (var i = 0; i < 31; i++) {
      axios
        .get("https://autumnfish.cn/top/list?idx=" + i.toString())
        .then(input => {
          this.toplist.push(input.data.playlist);
          if(!this.flag){
              this.flag=true
              this.musiclist=this.toplist[0].tracks
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style>
/* 大体布局star */
.el-col {
  border-radius: 4px;
}
.bg-purple {
  border-right: 1px solid #d3d3d3;
  border-left: 1px solid #d3d3d3;
  background: #f9f9f9;
  border-radius: 0px;
}
.bg-purple-light {
  border-radius: 0px;
  border-left: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  background: #ffffff;
}
.row-bg {
  background-color: #f5f5f5;
}
/* 大体布局end */
/* 左侧排行榜star */
a {
  text-decoration: none;
  color: black;
}
.fea-title {
  font-family: simsun, \5b8b\4f53;
  padding: 40px 10px 12px 15px;
  font-size: 14px;
}
.fea-ul {
  list-style: none;
}
.fea-ul li {
  position: relative;
  height: 42px;
  padding: 6px 0 6px 20px;
  display: block;
}
.fea-ul li img {
  float: left;
  margin-right: 15px;
}
.fea-ul .title {
  padding: 0px;
  margin-bottom: 5px;
  font-size: 12px;
}
.fea-ul li .col {
  color: #999;
  padding: 0px;
  margin-top: 5px;
  font-size: 12px;
}
.fea-ul li:hover {
  background-color: #e6e6e6;
}
#bfj {
  font-size: 20px;
  color: #bcbcbc;
}
/* 左侧排行榜end */
/* 右侧star */
/* 头部内容star */
.tophand {
  height: 200px;
}
.tophandimg img {
  margin: 40px;
  padding: 2px;
  border: 1px solid #cccccc;
  float: left;
}
.tophandgl {
  float: left;
  margin-top: 55px;
}
.tophandgl .title {
  font-size: 20px;
  font-weight: normal;
}
.tophandgl .upd {
  margin: 10px 0px 20px 0px;
}
.col {
  font-size: 12px;
  color: #999;
}
.tophandgl .time {
  font-size: 12px;
}
.tophandgl .el-icon-plus {
  margin-left: -10px;
}
/* 头部内容end */
/* 列表star */
.toplist {
  margin-top: 50px;
  margin-left: 40px;
  padding-right: 40px;
}
.toplist .toplistdata span {
  display: inline-table;
}
.py {
  float: right;
}
/* 右侧end */
</style>